<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>QuickFlip 2 Plugin for jQuery - Basic examples</title>

<!-- adjust these paths as necessary -->

<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.quickflip.source.js" type="text/javascript"></script>

<script type="text/javascript">
function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min)) + min;
}
function getRandomTime(){
	return getRandomInt(3000,6000);
}
function initQuickFlip(selector){
	var vertical = (getRandomInt(0,2)==0?false:true);
	$(selector).quickFlip({vertical: vertical});
	recursive_flip(selector);
}
function recursive_flip(selector){
	setTimeout(function(){
		$(selector).quickFlipper();
		setTimeout(function(){
			$(selector).quickFlipper();
			recursive_flip(selector, getRandomTime());
		}, getRandomTime());
	}, getRandomTime());
}
$(function() {
    
    initQuickFlip('.flip1');
    initQuickFlip('.flip2');
    initQuickFlip('.flip3');
    initQuickFlip('.flip4');
    initQuickFlip('.flip5');
    initQuickFlip('.flip6');
    initQuickFlip('.flip7');
    initQuickFlip('.flip8');
    initQuickFlip('.flip9');
    
});
</script>

<!-- end quickflip javascript -->

<link rel="stylesheet" type="text/css" href="css/basic-quickflips.css" />

</head>

<body>
    
<!--     <div class="quickFlip"> -->
<!--         <div class="blackPanel" style="/*background-image:url('img/me.jpg');*/"> -->
<!--             <h3 class="first">jQuery QuickFlip</h3> -->

<!--             <p class="panel-content"> QuickFlip takes any piece of HTML markup and flips it like a card. It's simple to implement and the animation is fresh and original. </p> -->
<!--             <p> -->
<!--             <a href="#" class="quickFlipCta">Click to Flip</a> -->
<!--             </p> -->

<!--         </div> -->
    
<!--         <div class="redPanel" style="/*background-image:url('img/Untitled.jpg');*/"> -->
<!--             <h3 class="first">QuickFlip 2</h3> -->
<!--             <h4>A plugin for jQuery</h4> -->
<!--             <p><em>By Jon Raasch</em></p> -->
<!--             <p><a href="http://jonraasch.com/blog/quickflip-2-jquery-plugin">More About QuickFlip</a> -->
<!--             </p> -->
            
<!--             <p><a href="#" class="quickFlipCta">Click to see QuickFlip in action</a> -->
<!--         </div> -->
<!--     </div> -->

<div style="width:650px;">
    <div class="quickFlip flip1">
		<div class="flipelm" style="background-image:url('img/bat_bedtime_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/bestican_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/bifocal_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/box_socks_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/brush_teaser.jpeg')"></div>
    </div>

    <div class="quickFlip flip2">
		<div class="flipelm" style="background-image:url('img/canal_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/capt_kidd_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/carddribbble_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/carrot_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/cove_teaser.jpeg')"></div>
    </div>

    <div class="quickFlip flip3">
		<div class="flipelm" style="background-image:url('img/derby_lady_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/dozer_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/dumptruck_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/eensy_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/extra_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/werewolf_teaser.jpeg')"></div>
    </div>

    <div class="quickFlip flip4">
		<div class="flipelm" style="background-image:url('img/for_the_man_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/glacier_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/grrr_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/harry_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/ltah_teaser.jpeg')"></div>
    </div>

    <div class="quickFlip flip5">
		<div class="flipelm" style="background-image:url('img/nunatakdribbble_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/pirates_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/reefdribbble_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/rrwooo_rrwooo_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/rustler_teaser.jpeg')"></div>
    </div>

    <div class="quickFlip flip6">
		<div class="flipelm" style="background-image:url('img/satellite_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/shot_1300121080_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/shot_1300969987_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/soupsearch_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/sub_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/tomatosoup_teaser.jpeg')"></div>
    </div>
    
    <div class="quickFlip flip7">
		<div class="flipelm" style="background-image:url('img/bat_bedtime_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/bestican_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/bifocal_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/box_socks_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/brush_teaser.jpeg')"></div>
    </div>

    <div class="quickFlip flip8">
		<div class="flipelm" style="background-image:url('img/for_the_man_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/glacier_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/grrr_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/harry_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/ltah_teaser.jpeg')"></div>
    </div>

    <div class="quickFlip flip9">
		<div class="flipelm" style="background-image:url('img/canal_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/capt_kidd_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/carddribbble_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/carrot_teaser.jpeg')"></div>
		<div class="flipelm" style="background-image:url('img/cove_teaser.jpeg')"></div>
    </div>
</div>
<script type="text/javascript">

</script>

</body>
</html>